<template>
  <div style="height:100%">
    <div class="pullMask" style="height:100%">
      <div @click="$emit('clickImg')" :class="{ 'openParticles' : state }" id="particles-js"></div>  
      <img class="background" :src="background" :class="{ 'openClass' : state }" />
      <div :class="{ 'openTitle' : state }"
           class="title">
            <img src="../../../assets/img/iwantstrategy/带着策略前行.png" />
            <a>不需要别人给予 你想要的触手可及</a>
          </div>
      <div class="btn">
        <div :class="{ 'openSelectedBtn' : state }" @click="$emit('openMask', 'feature')">
          <i style="font-size: 1.2em" class="iconfont icon-touzifenggeicon"></i>
            按投资风格
        </div>
        <div :class="{ 'openSelectedBtn' : state }" @click="$emit('openMask', 'type')">
          <i style="font-size: 1em" class="iconfont icon-celveleixingicon"></i>
            按策略类型
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'pullMask',
  props: {
    background: {
      type: String,
      default: ''
    },
    state: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {

    }
  },
  watch: {
    
  },
  methods: {

  },
  mounted () {
    // particlesJS('particles-js', this.$config.particlesJS)
  },
  created () {
  }
}
</script>

<style lang="less" scoped>
.pullMask {
  overflow: hidden;
  position: relative;
  transform: translate3D(0, 0, 0);
  .background {
    height: 100%;
    transition: all 0.8s;
    width: 120%;
    transform: translate3D(35px, 0, 0) scale(1.5,1.05);
  }
  .openClass {
    transform: translate3D(-36px, -50px, 0) scale(0.84,1.2);
    height: 50%;
  }
  .title {
    position: absolute;
    top: 0;
    transform: translate3D(0, 420%, 0);
    transition: all 0.8s;
    img {
      width: 50%;
      margin: 0 auto;
      display: block;
    }
    a {
      display: block;
      text-align: center;
      color: white;
      transform: translateY(0.6em);
      letter-spacing: 1px;
      font-size: 1em;
    }
  }
  .openTitle {
    transform: translate3D(0, 140%, 0);
  }
  .btn {
    position: fixed;
    bottom: 6%;
    z-index: 99;
    width: 100%;
    div {
      color: white;
      border-radius: 100px;
      border: 1px solid #FFFFFF;
      width: 76%;
      height: 2.5em;
      font-weight: 500;
      display: flex;
      font-size: 1.3em;
      justify-content: center;
      align-items: center;
      margin: 0.8em auto;
      i {
        font-size: 1.2em;
        margin-top: 2px;
        transform: translate3D(-0.4em, 0, 0)
      }
    }
  }
}

#particles-js {
   position: absolute;
   width: 100%;
   z-index: 2;
   height: 100%;
   right: 0;
   background-repeat: no-repeat;
   background-size: cover;
   background-position: 50% 50%;
   transition: all 0.8s;
}

.openParticles {
  transition: all 0.8s;
  top: 0;
  width: 100% !important;
}

</style>
